<template>
  <div>
    <h1>Dashboard page</h1>
    测试缓存keep-alive: <input type="text">
    <svg-icon icon-class="bug"></svg-icon>
    <!-- icon-class svg图标名称 class-name 额外的自定义类名 @click绑定事件 -->
    <svg-icon icon-class="404"
              class-name="custom-class"
              @click="sayHi"></svg-icon>
    <el-button type="primary">size改变</el-button>
  </div>
</template>

<script lang="ts">
import {
  getCurrentInstance,
  defineComponent,
  ComponentInternalInstance
} from 'vue'

export default defineComponent({
  name: 'Dashboard',
  setup() {
    const { proxy } = getCurrentInstance() as ComponentInternalInstance
    const sayHi = () => {
      // console.log(ctx)
      // alert('hi svg')
      // proxy?.$message.success('恭喜你，这是一条成功消息')
      // ;(proxy as ComponentPublicInstance).$message.success('mes!')
      proxy?.$message.success('成功消息！恭喜，ts提示有了！')
    }
    return {
      sayHi
    }
  }
})
</script>
<style lang="scss">
.custom-class {
  // 自定义样式404
  font-size: 200px;
  color: green;
}
</style>
